<template>
	<div>
		<h3>管理员 - 【 更换头像 】</h3>
		<hr >
		<div style="display: flex;">
			<div style="width: 40%;">
				<img v-bind:src="`${$ip}/api/public/showimg/${$store.state.user.pic}`"
				style="width: 20vw;height: 20vw">
			</div>
			<div style="width: 20%;line-height: 36px;">
				<table>
					<tr>
						更换头像
						<hr >
					</tr>
					<tr>
						<input type="file" ref="img"/>
					</tr>
					<tr>
						<td><button @click="doUpdatePic()">修改</button></td>
					</tr>
				</table>
			</div>
			
		</div>
		
	</div>
</template>

<script setup>
	import axios from 'axios';
</script>
<script>
	export default{
		data(){
			return{
				pic :'',
			}
		},
		methods:{
			doUpdatePic(){
				console.log("更新头像")
				let token = window.localStorage.getItem("token");
				let fd = new FormData();
				
				let filex = this.$refs.img.files[0];
				fd.append("mypic",filex);
				this.$axios.post(this.$ip+"/api/user/updatePic",fd,
				{headers : {
					'Authorization':'Bearer '+token,
					'Content-Type' :'multipart/form-data'}},
				).then((resp)=>{
					console.log(resp.data.data);
					this.$store.state.user.pic = resp.data.data;
				})
			},
		},
		mounted() {
			
		}
	}
</script>
<style>
</style>
